<template>
	<view class="register-container">
		<view class="register-form">
			<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" :errorType="errorType"
				labelAlign="right">
				<u-form-item prop="userName" borderBottom labelWidth="80">
					<u--input v-model="userInfo.userName" border="none" clearable placeholder="请输入用户名"
						prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</u-form-item>
				<u-form-item prop="password" borderBottom labelWidth="80">
					<u--input v-model="userInfo.password" type="password" border="none" clearable placeholder="请输入密码"
						prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
				</u-form-item>
				<u-form-item prop="repassword" borderBottom labelWidth="80">
					<u--input v-model="userInfo.repassword" type="password" border="none" clearable
						placeholder="请再次输入密码" prefixIcon="lock-fill" prefixIconStyle="font-size: 22px;color: #909399">
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="register-submit">
			<view class="submit-button">
				<u-button type="success" text="注册" @click="register"></u-button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					userName: '',
					password: '',
					repassword: '',
				},
				rules: {
					'userName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					'password': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						// 6-8个字符之间的判断
						{
							min: 4,
							max: 8,
							message: '长度在4-8个字符之间',
							trigger: ['blur', 'change']
						},
					],
					'repassword': [{
							type: 'string',
							required: true,
							message: '请填写密码',
							trigger: ['blur', 'change']
						},
						// 6-8个字符之间的判断
						{
							min: 4,
							max: 8,
							message: '长度在4-8个字符之间',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return value === this.userInfo.password
							},
							message: '两次输入的密码必须一致',							
							trigger: ['blur', 'change']
						},
					]
				},
				errorType: 'border-bottom',
			};
		},
		methods: {

			register() {

				var _this = this
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					uni.request({
						url: 'http://127.0.0.1:8080/sysuser/register',
						method: 'POST',
						data: _this.userInfo,
						success: (res) => {
							console.log(res);
							uni.$u.toast('注册成功')
							uni.navigateBack({
								delta:1
							})
						},
						fail: (err) => {
							console.log('err', err)
							.$u.toast('注册失败')
						}
					});
					// uni.request({
					//     url: 'http://www.127.0.0.1:8080/sysuser/login2/' + userInfo.userName + '/' + userInfo.password , 
					// 	method:"POST",					  
					//     success: (res) => {
					//         console.log('res',res);
					//     },
					// 	fail: (error) => {
					// 		console.log('error',error);
					// 	}
					// });
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-container {
		.register-form {
			margin-top: 40px;
			padding: 10px;
		}

		.register-submit {
			padding: 10px;

			// display: flex;
			// flex-direction: row;
			// justify-content: space-around;
			.submit-register {
				margin-top: 5px;
			}
		}
	}
</style>
